<template>
  <div class="sampleComparison tapStyle secondary-page-mode">
    <div class="secondary-toolbar">
      <span>时间选择 : </span>
      <div class="layoutBox" style="width:110px">
        <el-date-picker v-model="dateRange" type="month" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM"></el-date-picker>
      </div>&emsp;&emsp;
      <span>监测项目 : </span>
      <div class="layoutBox" style="width:190px">
        <el-select v-model="value" multiple collapse-tags placeholder="请选择">
          <el-option
            v-for="item in optionData"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>&emsp;&emsp;
      <el-button @click="search()"><i class="iconfont icon-sousuo"></i>查询</el-button>
      <el-button type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
    </div>
    <div class="currency-mode-wrap scrollSpecial">
      <div class="reminder-wrap">
        <span class="reminder-title">温馨提示</span>
        <div class="reminder-content">
          <div class="reminder-text">
            <p>所选时间段内共有“多点线性核查移”x次，共有合格项m次，不合格项y次。影响数据n条。点位1、点位2的上次周核查时间距今已有7天；站点3的上次周核查距今已有6天。</p>
            <div><el-button type="noticonsecondBtn"> 生成任务 </el-button></div>
          </div>
        </div>
        <div class="reminder-toolbar">
          <div class="state-legend">
            <span><i class="qualified-icon"></i> 合格</span>
            <span><i class="unqualified-icon"></i> 不合格</span>
          </div>
          <div class="state-radio-wrap">
            <el-radio-group v-model="stateRadio" size="small" @change = "toggleTab">
              <el-radio-button label="1">当前断面</el-radio-button>
              <el-radio-button label="2">图表</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="currency-body-toggle">
        <div v-show="stateRadio === '1'" style="height: 100%">
          <div class="table-head">
            <table>
              <tr>
                <th width="13%" rowspan="2">监测项目</th>
                <th width="10%" rowspan="2">单位</th>
                <th colspan="2">仪器测试值</th>
                <th width="16%" rowspan="2">误差率</th>
                <th width="17%" rowspan="2">技术要求</th>
                <th width="16%" rowspan="2">是否合格</th>
              </tr>
              <tr>
                <td width="17%">自动取样</td>
                <td width="17%">人工采样</td>
              </tr>
            </table>
          </div>
          <el-scrollbar style="height: calc(100% - 62px)">
            <ul class="table-body">
              <li v-for="(item,index) in tableData">
                <div class="toggle-row" :class="{active:item.toggle}">
                  <i class="toggle-icon" @click="toggleTable(item)" :class="{active:item.toggle}"></i>
                  <span>自动取样时间：{{ item.automaticSamplingTime }}</span>,&nbsp;
                  <span>人工采样时间：{{ item.artificiaSamplingTime }}</span>
                </div>
                <el-collapse-transition>
                  <div v-if="item.toggle">
                    <table>
                      <tr v-for="(n,m) in item.list">
                        <td width="13%">{{ n.indexName }}</td>
                        <td width="10%">{{ n.indexUnit }}</td>
                        <td width="17%">{{ n.automaticSamplingValue }}</td>
                        <td width="17%">{{ n.artificiaSamplingValue }}</td>
                        <td width="16%">{{ n.error }}</td>
                        <td width="17%">{{ n.technicalCequirement }}</td>
                        <td width="16%">
                          <b v-if="n.qualification === '合格'">合格</b>
                          <b v-if="n.qualification === '不合格'" style="color: red">不合格</b>
                        </td>
                      </tr>
                    </table>
                  </div>
                </el-collapse-transition>
              </li>
            </ul>
          </el-scrollbar>
        </div>
        <div class="chart-wrap" v-show="stateRadio === '2'" style="height: 100%;">
          <el-scrollbar style="height: 100%;">
            <div v-if="stateRadio === '2'">
              <div v-for="(item,index) in chartList"
                   :key="'k'+index"
                   :id="setChartId(index)"
                   class="zeroDriftChart"
                   style="height: 300px;"></div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "intervenExami",
    data() {
      return {
        dateRange: "",
        value:['w01019','w21003','w21011','w21001'],
        optionData: [
        {
          value: "w01019",
          label: "高锰酸盐"
        },
        {
          value: "w21003",
          label: "氨氮"
        },
        {
          value: "w21011",
          label: "总磷"
        },
        {
          value: "w21001",
          label: "总氮"
        }],
        currentPage:1,
        pageSize:1,
        pageList:[5,10,15],
        total:1,
        stateRadio:'1',
        tableData:[],
        chartList:[],
      };
    },
    computed:{
      totalPageNumber(){//计算总页数
        let number = 0;
        number = Math.ceil(this.total/this.pageSize);
        return number === 0 ? 1 : number;
      },
      stationInfo: {
        get: function() {
          return this.$store.state.stationInfo;
        }
      }
    },
    methods:{
      toggleTable(item){
        if(item.toggle){
          item.toggle = false;
        }else{
          item.toggle = true;
        }
      },
      toggleTab(val){
        // console.log(val);
        if (val === "2") {
          setTimeout(() => {
            this.createdChart();
          }, 500);
        }
      },
      search(){
        this.getTableData();
        this.searchChartData();
      },
      getTableData(){
        this.$http.get("/Quality/testData/integratedInterventionData", {
            params: {
              startTime: this.dateRange,
              endTime: this.dateRange,
              indexCodes: this.value.join(","),
              stationCodes: this.stationId, //this.stationId
              ifCurrentSection: true,// true为当前断面,false为所有
              // pageNumber: this.currentPage,
              // pageSize: this.pageSize
            }
          }).then(res=>{
            if(res.data.code === 0){
              this.tableData = res.data.content.dataList;
              this.tableData.forEach((item,index) =>{
                this.$set(item,'toggle',false);
              });
            }
          })
      },
      //设置图表id
      setChartId(index) {
        return "zeroDrift" + index;
      },
      //创建图表
      createdChart(){
        let myCharts = this.$echarts.init(document.querySelector('.zeroDriftChart'));
        myCharts.clear();
        for (let i=0;i < this.chartList.length;i++){
          let chart = this.$echarts.init(document.getElementById('zeroDrift'+i));
          let option = {
            // title:{
            //   text:"24小时"+ this.chartList[i].name +"跨度漂移历史数据",
            //   x:'center',
            //   y:20
            // },
            xAxis: {
              type: 'category',
              name:'时间',
              data: this.chartList[i].xAxis
            },
            legend: {
              data:[this.chartList[i].name],
              bottom:0
            },
            yAxis: {
              type: 'value',
              name:"相对误差(%)",
            },
            visualMap: {
              top: 10,
              right: -100,
              pieces: [{
                gte: this.chartList[i].lower,
                lte: this.chartList[i].upper,
                color: '#009966',
                label:'合格',
              },{
                gt: this.chartList[i].upper,
                color: '#d68787',
                label:'不合格',
              }],
              outOfRange: {
                color: '#d68787'
              }
            },
            grid:{
              top: 50,
              left: 80,
              bottom: 50,
              right: 70
            },
            series: [{
              data: this.chartList[i].yAxis,
              name: this.chartList[i].name,
              type: 'line',
              symbol: 'triangle',
              symbolSize: 20,
              lineStyle: {
                normal: {
                  color: '#008000',
                  width: 4,
                  type: 'dashed'
                }
              },
              itemStyle: {
                normal: {
                  borderWidth: 3,
                  color:'#0ec15a'
                }
              },
              markLine: {
                lineStyle:{
                  color:'red',
                  type:'solid'
                },
                data: [
                  {yAxis: this.chartList[i].upper, name: '最大误差'},
                  {yAxis: this.chartList[i].lower, name: '最小误差'}
                ]
              },
            }]
          };
          chart.setOption(option);
        }
      },
      //查询图表数据
      searchChartData(){
        this.$http.get("/Quality/testData/integratedInterventionChartData", {
          params: {
            startTime: this.dateRange,
            endTime: this.dateRange,
            indexCodes: this.value.join(","),
            stationCodes: this.stationId //this.stationId
          }
        }).then(res=>{
          if(res.data.code === 0){
            this.chartList = res.data.content.dataList;
          }
        })
      },
    },
    mounted(){

    },
    created() {
      this.$store.commit("setShowlefttree", true);
      this.dateRange = new Date();
    },
    watch:{
      stationInfo(value) {
        if (value.length > 0) {
          this.stationId = value[0].nodeId;
          this.getTableData();
          this.searchChartData();
        }
      }
    }
  };
</script>

<style scope lang="less">
  .sampleComparison {
    .tablebox{
      height: 100%;
    }
    .table-head,.table-body{
      table{
        width: 100%;
        border-collapse: collapse;
        td,th{
          border: 1px solid #d6e3f2;
          padding: 0 3px;
          height: 30px;
          text-align: center;
        }
        th{
          font-weight: 100;
        }
      }
      .toggle-row{
        height: 30px;
        line-height: 30px;
        padding-left: 6px;
        border-left: 1px solid #d6e3f2;
        border-right: 1px solid #d6e3f2;
        border-bottom: 1px solid #d6e3f2;
        &.active{
          /*border-bottom: none;*/
        }
      }
    }
    .table-body{
      table{
        margin-top:-1px;
      }
    }
    .toggle-icon{
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 3px;
      width: 13px;
      height: 13px;
      background: url("../../assets/images/retract-toggle.png") no-repeat;
      cursor: pointer;
      &.active{
        background: url("../../assets/images/open-toggle.png") no-repeat;
      }
    }
  }
</style>

